<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
      <el-form-item label="名称：" prop="title">
        <span>{{form.title}}</span>
      </el-form-item>
      <el-form-item label="封面：" prop="cover">
        <img :src="form.cover" style="width: 250px;height: 100px;border-radius: 5px"/>
      </el-form-item>
      <el-form-item label="内容：" prop="content">
        <div v-html="form.content"/>
      </el-form-item>
      <el-form-item label="上架：">
        <span>{{form.enable?'是':'否'}}</span>
      </el-form-item>
      <el-form-item label="排序：" prop="queue">
        <span>{{form.queue}}</span>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" @click="cancel">拒绝</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmit(true)">通过</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="拒绝理由" :visible.sync="dialogFormVisible">
      <el-form :model="form1">
        <el-form-item  :label-width="formLabelWidth">
          <el-input v-model="form1.reason" autocomplete="off" maxlength="50" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit(false)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from '../../utils/auth'
  import { edit, detail,check } from '@/api/buildingPromotion'

  export default {
    data() {
      return {
        formLabelWidth: '0px',
        dialogFormVisible:false,
        loading: false,
        form1:{
          reason:'',
        },
        form: {
          title: '',
          cover: '',
          content: '',
          enable: false,
          queue: '',
          token: getToken()
        },
        rules: {
          title: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
          ],
          cover: [
            { required: true, message: '请上传活动封面', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入活动内容', trigger: 'blur' }
          ],
          queue: [
            { required: true, message: '请输入活动序号', trigger: 'blur' }
          ]
        }
      }
    },
    components: {
    },
    methods: {
      cancel(){
        this.dialogFormVisible=!this.dialogFormVisible
      },
      onSubmit(flag) {
        if(flag){
          this.$confirm('确认通过审核？')
            .then(_ => {
              this.check(flag)
            })
            .catch(_ => {});
          return
        }
        if(!flag&&!this.form1.reason){
          this.$message.error('请输入拒绝理由')
          return
        }
        this.check(flag)
      },
      check(flag){
        check({changeTo:flag?'success':'failed',
          reason:this.form1.reason,targetId:this.$route.query.id,
          token:getToken()}).then(res => {
          this.$message.success('审核成功')
          this.$router.go(-1)
        }).finally(
          this.loading = false
        )
      }
    },
    created() {
      if(this.$route.query.id){
        detail({targetId:this.$route.query.id,token:getToken()}).then(res=>{
          this.form=res.data
          this.form.promotionId=this.form.id
          this.form.token=getToken()
        })
      }
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>

